<template>
  <section class="main">
    <!-- <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      :checked="checkAll"
      @change="changeAll"
    /> -->

    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="checkAll"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li
        :class="{ completed: item.isDone }"
        v-for="item in todoList"
        :key="item.id"
      >
        <div class="view">
          <!-- 虽然使用v-model 已经实现了 状态的更改,但是我们是在子组件中修改的父组件的数据,有违单向数据流 -->
          <!-- <input class="toggle" type="checkbox" v-model="item.isDone" /> -->
          <input
            class="toggle"
            type="checkbox"
            :checked="item.isDone"
            @change="changeStatus(item.id, $event)"
          />
          <label>{{ item.info }}</label>
          <button class="destroy" @click="del(item.id)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  // 接收数据
  props: ['todoList'],
  // 删除功能  不能让子组件删除数据
  methods: {
    del(id) {
      // 只管触发自定义事件
      this.$emit('del', id)
    },
    changeStatus(id, e) {
      // console.log(e.target.checked);
      // 只管触发自定义事件
      this.$emit('change', id, e.target.checked)
    }
    // changeAll(e){
    //   console.log(e.target.checked);
    //   this.$emit('changeAll', e.target.checked)
    // }
  },
  // 反选操作
  // 1. 所有的列表项的选中状态如果都是true全选按钮也是true,只要有一个是false,全选按钮的状态也是false
  // Main组件中额todoList就是最新的数据
  // 定义计算属性返回一个布尔值

  // 全选操作
  // 方式1: 属性绑定checked(前提) 为全选的复选框设置@change事件,在change事件中获取到自己最新的选中状态,在事件中触发方法
  //  父组件事件绑定这个方法, 接收最新的选中状态, 循环遍历设置数组元素的isDone属性的值

  // 方式2: 依旧双向绑定计算属性的值
          //  将计算属性写完整
          // 在set中可以获取到最新的计算属性的值
          // 父组件事件绑定这个方法, 接收最新的选中状态, 循环遍历设置数组元素的isDone属性的值
  computed: {
    checkAll:{
     get(){
        return this.todoList.every((item) => item.isDone)
     },
     set(val){ // 最新的选中状态 布尔值
       this.$emit('changeAll', val)
     }
    }
  }
}
</script>

<style></style>
